<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>城市-粤亮旅游网</title>
    <!-- 引入公共部分css -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/city.css">
    <!-- 引入字体图标 -->
    <style>
        @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?rghiog');
            src: url('fonts/icomoon.eot?rghiog#iefix') format('embedded-opentype'),
            url('fonts/icomoon.ttf?rghiog') format('truetype'),
            url('fonts/icomoon.woff?rghiog') format('woff'),
            url('fonts/icomoon.svg?rghiog#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
    </style>
    <script src="../js/jquery-3.3.1.js"></script>
</head>

<body>
<!--  -->
<section class="shortcut">
    <div class="top-bgc">
        欢迎来到粤亮旅游网!
    </div>
    <div class="w">
        <div class="mine">
            <ul>
                <li class="fl">
                    <a href="collect.html">我的收藏</a>
                    <a href="orders.html" style="padding: 0 10px ">我的订单</a>
                    <a href="#" class="logout">退出</a>
                </li>
            </ul>
        </div>

    </div>
</section>
<div class="header w">
    <div class="logo">

    </div>
    <div class="search">
        <input type="search" name="" id="" placeholder="请输入目的地">
        <button></button>
    </div>
    <div class="cs-phone">
        <img src="../images/hot-tel.jpg" alt="">
        <div class="kefu">客服热线(9:00-6:00)</div>
        <div class="phone">400-618-9090</div>


    </div>
</div>

<!-- 城市核心部分 -->
<div class="box w">
    <div class="city-name">

    </div>

    <div class="attractions city-part">
        <div class="tit">热门景点</div>
        <div class="show">
        </div>
    </div>

    <div class="accommodations city-part">
        <div class="tit">住宿推荐</div>
        <div class="show">
        </div>
    </div>

    <div class="delicacies city-part">
        <div class="tit">精品美食</div>
        <div class="show">
        </div>
    </div>

    <!-- 评论功能 -->
    <div class="comments city-part">
        <div class="tit">用户点评</div>
        <div class="comment-box">
          <div style="font-size: 26px;color: #999; text-align: center">暂无评论</div>
        </div>

        <div class="wrapper">
            <i class="avatar"></i>
            <textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea>
            <button class="publish">发布</button>
        </div>
        <div class="wrapper">
            <span class="total">0/200字</span>
        </div>

    </div>

</div>
<!-- 电梯 -->
<div class="city-elevator">
    <ul class="city-elevator-list">
        <li><a href="javascript:;" data-name="attractions">热门景点</a></li>
        <li><a href="javascript:;" data-name="accommodations">住宿推荐</a></li>
        <li><a href="javascript:;" data-name="delicacies">精品美食</a></li>
        <li><a href="javascript:;" data-name="comments">用户点评</a></li>
        <li><a href="javascript:;" id="backTop"><i class="sprites"></i>顶部</a></li>
    </ul>
</div>
<script src="../js/city.js"></script>


<!-- 公共尾部 -->
<footer class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>价格保证</h4>
                        <p>同类产品,保证低价</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>退订保障</h4>
                        <p>因特殊情况影响出行,保证退订</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>救援保障</h4>
                        <p>旅途中意外情况,保证援助</p>
                    </div>
                </li>
                <li>
                    <h5></h5>
                    <div class="service_txt">
                        <h4>贴心服务</h4>
                        <p>快速响应,全年无休</p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="mod_help">
            <dl>
                <dt>关于我们</dt>
                <dd><a href="#">粤亮简介</a></dd>
                <dd><a href="#">旅游度假资质</a></dd>
                <dd><a href="#">网络地图</a></dd>
                <dd><a href="#">诚聘英才</a></dd>
                <dd><a href="#">知识产权声明</a></dd>
                <dd><a href="#">用户协议</a></dd>
            </dl>
            <dl>
                <dt>加盟合作</dt>
                <dd><a href="#">团购预约</a></dd>
                <dd><a href="#">分销系统</a></dd>
                <dd><a href="#">平台开放</a></dd>
                <dd><a href="#">供应商结盟合作</a></dd>
            </dl>
            <dl>
                <dt>联系我们</dt>
                <dd><a href="#">门店信息</a></dd>
                <dd><a href="#">意见反馈</a></dd>
                <dd><a href="#">不良信息处置方法</a></dd>

            </dl>
            <dl>
                <dt>订购指南</dt>
                <dd><a href="#">门票使用</a></dd>
                <dd><a href="#">常见问题</a></dd>
            </dl>

            <dl>
                <dt>售后服务</dt>
                <dd><a href="#">退货说明</a></dd>
                <dd><a href="#">投诉建议</a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd>
                    <img src="../images/了解更多.png" alt="">
                    粤亮客户端
                </dd>
            </dl>
        </div>
        <div class="mod_copyright">
            <div class="links">
                <a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机粤亮 | 友情链接 | 销售联盟 | 粤亮社区 |
                品优购公益 | English Site | Contact U
            </div>
            <div class="copyright">
                地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
                京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</footer>

<script>
    function queryHotel(hid){
        $.ajax({
            url: `/hotel/${hid}`,
            type: "GET",
            success: function (response) {
                localStorage.setItem('hotelDetail', JSON.stringify(response.data));
                window.location.href = 'hotel-detail.html?hid=' + hid
                // 这里可以处理响应数据并更新页面
            },
            error: function () {
            }
        });
    }

    let cityData = localStorage.getItem('cityData');
    cityData = JSON.parse(cityData);

    const total = document.querySelector('.total')
    const tx = document.querySelector('#tx')
    const publish = document.querySelector('.publish')

    //1.当文本域获取焦点，让total显示出来
    tx.addEventListener('focus', function () {
        total.style.opacity = 1
    })
    //2.当文本域失去焦点，让total隐藏起来
    tx.addEventListener('blur', function () {
        total.style.opacity = 0
    })

    //3.检测用户输入
    tx.addEventListener('input', function () {
        // console.log(tx.value.length);//获得输入的长度
        total.innerHTML = `${tx.value.length}/200字`
    })


    //4.下面会出现用户评论
    publish.addEventListener('click', function (e) {
        //只有按下enter才会触发
        //判断用户输入是否不为空  如果不为空，才会打印显示
        if (tx.value.trim() !== '') {
            let responseData = localStorage.getItem('responseData');
            responseData = JSON.parse(responseData);

            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const cid = urlParams.get('cid');

            const content = tx.value

            let commentData = {
                cid: cid,
                content: content
            }
            // 发送 Ajax 请求
            $.ajax({
                url: `/index/comment`,
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify(commentData),
                success: function (response) {
                    // 处理响应
                    if (response.success === 1) {
                        // 进行跳转或其他操作
                        cityData.comments.unshift(response.data);
                        // 将修改后的cityData重新存储回LocalStorage中
                        localStorage.setItem('cityData', JSON.stringify(cityData));
                        window.location.href = 'city.html?cid='+cid
                    } else {
                        alert("查询失败");
                    }
                },
                error: function () {
                    alert("请求失败");
                }
            })
        }

        //清空
        tx.value = ''
        //字符统计还原
        total.innerHTML = '0/200字'


    })

    // 获取图片链接
    function getImage(image) {
        return `/common/download?name=${image}`;
    }

    window.addEventListener("DOMContentLoaded", function () {
        // 获取URL参数
        const urlParams = new URLSearchParams(window.location.search);
        const cid = urlParams.get('cid');
        // 发送 Ajax 请求
        $.ajax({
            url: `/city/name/${cid}`,
            type: "GET",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {

                    let html = `
                        <div class="ch">${response.data}</div>
                    `
                    document.querySelector('.box .city-name').innerHTML = html
                } else {
                    alert("查询失败");
                }
            },
            error: function () {
                alert("请求失败");
            }
        })

        //景点模块
        const attractions = document.querySelector('.attractions .show');
        let html1 = ''
        cityData.views.forEach(function (view) {
            const viewImage = getImage(view.viewImage)

            html1 += `
                  <a href="sight.html?viewId=${view.viewId}"><div class="content" style="cursor: pointer">
          <img src="${viewImage}" alt="">
          <div class="name">${view.viewName}</div>
          <div class="score">${view.score}分</div>
        </div></a>
        `
        })
        attractions.innerHTML = html1

        //酒店模块
        const accommodations = document.querySelector('.accommodations .show');
        let html2 = ''
        cityData.hotels.forEach(function (hotel) {
            const hotelImage = getImage(hotel.image)

            html2 += `
                  <div class="content" onclick="queryHotel(${hotel.hid})">
          <img src="${hotelImage}" alt="">
          <div class="name">${hotel.hotelName}</div>
        </div>
        `
        })
        accommodations.innerHTML = html2

        //美食模块
        const delicacies = document.querySelector('.delicacies .show');
        let html3 = ''
        cityData.foods.forEach(function (food) {
            const foodImage = getImage(food.foodImage)

            html3 += `
        <div class="content">
          <img src="${foodImage}" alt="">
          <div class="name">${food.foodName}</div>
        </div>
        `
        })
        delicacies.innerHTML = html3

        //评论模块
        if (cityData.comments.length !== 0){
          const commentBox = document.querySelector(".comment-box")
          let html4 = ''
          cityData.comments.forEach(function (comment) {
            html4 += `
                  <div class="comment">
          <div class="username">${comment.userName}</div>
          <p>${comment.content}</p>
          <p class="time">${comment.publishTime}</p>
        </div>
        `
          })

          commentBox.innerHTML = html4
        }
    })

    const logout = document.querySelector('.logout')
    logout.addEventListener('click', function () {
        $.ajax({
            url: "/logout",
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    alert("退出成功");
                    localStorage.removeItem('responseData')
                    localStorage.removeItem('hotelDetail')
                    localStorage.removeItem('cityData')
                    // 进行跳转或其他操作
                    window.location.href = 'index.html'
                } else {
                    alert("退出失败，请检查用户名和密码");
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    })

</script>
</body>

</html>